import Card from '@/components/Card'
import DataItem from '@/components/DataItem'
import BlockItem from '@/components/BlockItem'
import Header from '@/components/Header'
import styles from './style.module.css'
import { useEffect, useState } from 'react'
import { DSHDJorder, timeList } from './Constent'
import DSHDJ from '@/assets/待审核单据.svg?react'
import MDXSGVF from "@/assets/门店销售备份 2.svg?react"
import LXBF from '@/assets/我的拉新备份 3.svg?react'
import BZ8 from '@/assets/编组 8.svg?react'
import YHD from '@/assets/要货单备份.svg'
import JHD from '@/assets/进货单备份.svg'
import DBB from '@/assets/调拨单备份.svg'
import PD from '@/assets/盘点单备份.svg'
import CK from '@/assets/商品库存.svg'
import LSJL from '@/assets/要货单历史备份 4.svg'
import { getStoreList } from '@/api/UserAxios'
import { useDispatch } from 'react-redux'
import { setStoreList } from '@/store/UserSlice'
import { useNavigate } from 'react-router'


function index() {
    const token = localStorage.getItem('token')
    const abort = new AbortController();
    const signal = abort.signal
    const storeList = getStoreList()
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [PendingData, setPendingData] = useState<any>([])
    const [HomeData, setHomeData] = useState<any>({})
    const [activeIndex, setActiveIndex] = useState<number>(0)
    const [cat, setCat] = useState('today')

    useEffect(() => {

        fetch('http://180.76.236.114:3006/me-api/pending-preview', {
            headers: {
                'Authorization': 'Bearer ' + token
            }
        })
            .then(res => res.json())
            .then(res => {
                setPendingData(res.data)
            })

    }, [])

    useEffect(() => {

        fetch('http://180.76.236.114:3006/me-api/homedata?cat=' + cat, {
            headers: {
                'Authorization': 'Bearer ' + token
            },
            signal
        })
            .then(res => res.json())
            .then(res => {
                setHomeData(res.data)
            })
            .catch(err => {
                console.log(err)
            })

    }, [cat])

    useEffect(() => {

        getStoreList()
            .then(res => {
                dispatch(setStoreList(res))
            })
    }, [])

    return (
        <>
            <div className='absolute overflow-x-hidden w-[100%] h-[385px]'>
                <div className={styles.circle}></div>
            </div>
            <div className='flex flex-col gap-[24px] relative pb-[80px] '>
                <Header Icon={BZ8} />
                <Card>
                    <BlockItem icon={YHD} text="要货单" />
                    <BlockItem icon={JHD} text="进货单" />
                    <BlockItem icon={DBB} text="调拨单" />
                    <BlockItem icon={YHD} text="其他入库单" />
                    <BlockItem icon={LSJL} text="其他出库单" />
                    <BlockItem icon={PD} text="盘点单" />
                    <BlockItem icon={CK} text="库存查询" />
                    <BlockItem icon={LSJL} text="零售单历史" />
                </Card>
                <Card Icon={DSHDJ} title='待审核单据' className='overflow-x-auto'>
                    <div className='flex flex-nowrap'>
                        {PendingData && DSHDJorder.map(item => {
                            const value = PendingData[item]?.value || 0
                            const text = PendingData[item]?.text || ''
                            return <div className='w-[154px] h-[136px] float-left text-center mr-[12px] bg-[#EEEEEE]' key={item} >
                                {value ?
                                    <p className={`mt-[17px] h-56px ${styles.value}`}>{value}</p> :
                                    <div className="skeleton w-[100%] h-[69px]"></div>
                                }
                                {text ?
                                    <p className={styles.text}>{text}</p> :
                                    <div className="skeleton w-[100%] h-[65px]"></div>
                                }
                            </div>
                        })}
                    </div>
                </Card>
                <div className='flex pl-[43px]'>
                    {timeList.map((item, index) => {
                        return <div
                            key={index}
                            className={`w-[84px]
                                h-[62px] 
                                border-b-6 
                                mr-[37px] 
                                text-center 
                                border-transparent 
                                ${activeIndex === index && styles.active}`
                            }
                            onClick={() => {
                                abort.abort()
                                setHomeData({})
                                setCat(item.value)
                                setActiveIndex(index)
                            }}>
                            <p className='h-[42px] leading-[42px] text-[30px]'>{item.text}</p>
                        </div>
                    })}
                </div>
                <Card Icon={MDXSGVF} title="门店销售" data={HomeData.mdxs}>
                    <DataItem className={styles.cube} key='sell' />
                    <DataItem className={styles.cube} key='rtn' />
                    <DataItem className={styles.cube} key='atv' />
                    <DataItem className={styles.cube} key='netSales' />
                    <DataItem className={styles.cube} key='voucher' />
                    <DataItem className={styles.cube} key='standbyFund' />
                </Card>
                <Card Icon={MDXSGVF} title="门店客流" data={HomeData.storeFootTraffic}>
                    <DataItem className={styles.cube} key='customers' />
                    <DataItem className={styles.cube} key='members' />
                    <DataItem className={styles.cube} key='repeat' />
                </Card>
                <Card Icon={MDXSGVF} title="线上拉新" data={HomeData.acquisition}>
                    <DataItem className={styles.cube} key='online' />
                    <div className='w-[1px] h-[70px] mt-[18px] bg-stone-300'></div>
                    <DataItem className={styles.cube} key='perchase' />
                </Card>
                <Card
                    Icon={LXBF}
                    title="会员关怀"
                    data={HomeData.memberCare}
                    className='justify-start'
                >
                    <DataItem className={styles.cube} key='birthCare' onClick={() => {
                        navigate('/care')
                    }} />
                </Card>
            </div>
        </>
    )
}
export default index
